<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="/js/imageAuto.js"></script>
    <script type="text/javascript">
        localPath="creative"
    </script>
</head>
<body>
<div class="bg-white box-shadow pos-rlt">

    <div class="p-h-md p-v bg-white box-shadow pos-rlt">
        <h3 class="no-margin have-btn-title" id="aaa">广告管理</h3>
        <button id="newCreativesButton" data-toggle="modal" data-target="#newCreatives" type="button"
                class="btn btn-sm btn-success ng-click-active pull-right pull-right" data-placement="top"
                data-animation="am-slide-top aside-open-backdrop" data-container="body" bs-aside="aside"
                <c:if test="${userContext.member.operationType==1}">style="display:none"</c:if>
        ><i class="glyphicon glyphicon-plus"></i>
            新建创意
        </button>
    </div>
</div>
<form id="creativesForm">
    <div class="p-md clear">
        <div class="panel-body advert-select" style="padding-top:0">
            <select name="crtSize" id="crtSize" class="form-control w">
                <option value="0"  <c:if test="${form.crtSize==0 }"> selected="selected"</c:if>>全部尺寸</option>
            </select>
            <input id="crtSizeValue" type="hidden" value="${form.crtSize }"/>
        </div>
        <c:forEach items="${form.page.content }" var="frontMaterial">
            <div class="col-sm-4">
                <div name="showOrhide" class="panel b-a materials-item">
                    <div class="panel-heading bg text-lt">
                          <span class="pull-right" style="display:none">
                              <a href="javascript:delectCreative(${frontMaterial.id })" <c:if test="${userContext.member.operationType==1}">style="display:none"</c:if>>
                                  <i class="fa fa-trash-o m-l-sm materials-action-icon"></i>
                              </a>
                              <a name="editButton" data-toggle="modal" data-target="#editCreatives" <c:if test="${userContext.member.operationType==1}">style="display:none"</c:if>>
                                  <i class="fa fa-pencil-square-o m-l-sm materials-action-icon"></i>
                              </a>
                              <input type="hidden" value="${frontMaterial.name }">
                              <input type="hidden" value="${frontMaterial.thumbPicPath }">
                              <input type="hidden" value="${frontMaterial.id }">
                              <input type="hidden" value="${frontMaterial.crtSize }"/>
                              <input type="hidden" value="${frontMaterial.imageId }"/>
                              <input type="hidden" value="${frontMaterial.picPath }">
                          </span>
                            ${ frontMaterial.name}
                    </div>
                    <div class="progress progress-xxs no-margin no-radius bg-white">
                        <div class="progress-bar bg-light no-radius" style="width:100%"></div>
                    </div>
                    <a href="${frontMaterial.picPath }" target="_blank">
                        <div class="panel-body p-v-md cl">
                            <img src="${frontMaterial.thumbPicPath }" alt=" ">
                        </div>
                    </a>
                    <div class="panel-heading text-center" style="padding-top:0">
                        <small class="text-muted">${frontMaterial.crtSizeDetail}</small>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>

    <div class="text-center">
        <airad:pagination pageSize="${form.page.pageSize }"
                          href="/materials/list?pageNumber=PAGENUM
			&crtSize=${form.crtSize }"
                          totalRecord="${form.page.totalCount }"
                          currentPage="${form.page.pageNumber }"
        >
        </airad:pagination>
    </div>
</form>

<!-- Initialize Swiper -->
<script type="text/javascript">


    //图片大小自适应
    $('div.panel-body.p-v-md img').load(function () {
        adjustImgSize($(this), $(this).parent().width(), $(this).parent().height());
    });
    //删除物料
    function delectCreative(materialId) {
        $.ajax({
            url: "/creatives/delete/" + materialId,
            type: "POST",
            dataType: "json",
            cache: false,
            success: function (data) {
                if (data == "success") {
                    bootbox.dialog({
                        message: "删除成功",
                        buttons: {
                            "success": {
                                "label": "<i class='icon-ok'></i> 确定",
                                "className": "btn-sm btn-success",
                                "callback": function () {
                                    location.reload();
                                }
                            }
                        }
                    });
                } else {
                    bootbox.dialog({
                        message: "对不起您要删除的创意正在投放中无法删除",
                        buttons: {
                            "success": {
                                "label": "<i class='icon-ok'></i> 确定",
                                "className": "btn-sm btn-success",
                                "callback": function () {
//     							 location.reload();
                                }
                            }
                        }

                    });


                }
            }
        });
    }

    for (var i = 0; i < crtSizes.length; i++) {
        $("#crtSize").append("<option  value='" + crtSizes[i].crtSize + "' " + selected(crtSizes[i].crtSize, $("#crtSizeValue").val()) + ">" + crtSizes[i].string + "</option>")
    }

    function selected(crtSize, crtSize2) {
        if (crtSize == crtSize2) {
            return "selected='selected'"
        }
        return "";
    }

    $().ready(function () {
        if (operationType == 1 && !isFromBackend) {
// 		$("#newCreativesButton").hide()
        } else {
            $("div[name=showOrhide]").hover(over, out)
            function over() {
                $(this).find("span").show()
            }

            function out() {
                $(this).find("span").hide();
            }
        }

        //全局
        var imageHeight = 425;
        var imgWidth = 140;
        //打开新建广告创意
        $("#newCreativesButton").click(function () {

            $("#crtSizeAdd").html("");
            console.log(crtSizes);
            for (var i = 0; i < crtSizes.length; i++) {
                $("#crtSizeAdd").append("<option  value='" + crtSizes[i].crtSize + "' data-type='" + crtSizes[i].siteSetType + "'>" + crtSizes[i].string + "</option>")
                if (crtSizes[i].crtSize == crtSize) {
                    $("#crtSizeDetailEdit").val(crtSizes[i].string);
                    $("#sitesetTypeEdit").val(crtSizes[i].siteSetType);
                }
            }
            $("#crtSizeDetailAdd").val($("#crtSizeAdd").find("option:selected").text());
            $("#sitesetTypeAdd").val($("#crtSizeAdd").find("option:selected").attr("data-type"));
            /*$("select[name=crtSize]").change(function(){
             var crtSize=$(this).val();
             for(var i=0;i<crtSizes.length;i++){
             if(crtSizes[i].crtSize==crtSize){
             $("#crtSizeDetailAdd").val(crtSizes[i].string);
             $("#crtSizeDetailEdit").val(crtSizes[i].string);
             $("#sitesetTypeAdd").val(crtSizes[i].siteSetType);
             $("#sitesetTypeEdit").val(crtSizes[i].siteSetType);
             }
             }*/
            //获取初始图片尺寸
            var crtSize = $("#crtSizeAdd").val();
            //初始化图片宽高
            updatedCrtSize(crtSize);
        });
        //
        //提交新建广告创意
        $("#doNewCreatives").click(function () {
            if ($("#creativeImageIdAdd").val() == "" || $("#creativeImageIdAdd").val() == null) {
                alert("请上传图片")
                return
            }
            $("#creativsAddForm").submit();
        });
        //修改创意
        $("a[name=editButton]").click(function () {
            var tname;
            var imageUrl;
            var id;
            var crtSize;
            var imageId;
            var originalUrl;
            $(this).parent().find("input").each(function (i, e) {
                if (i == 0) {
                    tname = $(this).val();
                }
                if (i == 1) {
                    imageUrl = $(this).val();
                }
                if (i == 2) {
                    id = $(this).val();
                }
                if (i == 3) {
                    crtSize = $(this).val();
                }
                if (i == 4) {
                    imageId = $(this).val();
                }
                if (i == 5) {
                    originalUrl = $(this).val()
                }
            })

            //初始化图片宽高
            updatedCrtSize(crtSize);
            //赋值创意名称--创意规格--创意id--图片url
            $("#nameEdit").val(tname);
            $("#crtSizeEdit").html("");
            for (var i = 0; i < crtSizes.length; i++) {
                $("#crtSizeEdit").append("<option  value='" + crtSizes[i].crtSize + "' " + selected(crtSizes[i].crtSize, crtSize) + ">" + crtSizes[i].string + "</option>")
                if (crtSizes[i].crtSize == crtSize) {
                    $("#crtSizeDetailAdd").val(crtSizes[i].string);
                    $("#crtSizeDetailEdit").val(crtSizes[i].string);
                    $("#sitesetTypeAdd").val(crtSizes[i].siteSetType);
                    $("#sitesetTypeEdit").val(crtSizes[i].siteSetType);
                }
            }
// 		$("#crtSizeEdit").children().each(function(){
// 			if($(this).val()==crtSize){
// 				$(this).prop("selected",true);
// 			}
// 		})
            //向修改表单中添加要修改的创意值
            $("#creativeImageUrlEdit").val(imageUrl);
            $("#creativeIdEdit").val(id);
            $("#creativeImageIdEdit").val(imageId)
            $("#creativeImageUrlOriginalEdit").val(originalUrl);
            $("#editUploadImage").attr("src", imageUrl);
// 		alert(imageUrl)
// 		$("#uploadImage").attr("src",res.picSavePath);
            //重新初始广告创意图片上传
            $("#imageEditDiv").html('<input id="imageEdit"  name=""  type="file">');
            $.mitian.initSingleFileUploader('#imageEdit',
                    "*.jpeg;*.jpg;*.png", 1024 * 1024, imageEditUploadStart,
                    imageEditUploadSuccess);
        });

        //提交修改创意
        $("#doEditCreatives").click(function () {
// 		if($("#crtSizeEdit").val()==0){
// 			alert("请选择创意尺寸");
// 			return;
// 		}
            if ($("#creativeImageIdEdit").val() == "") {
                alert("请上传图片");
                return
            }
            //提交表单--修改的表单
            $("#creativsEditForm").submit();

        });

        //关闭新建广告创意弹窗
        $("#newCreativesClose").click(function () {
            $("#creativsAddForm").find("input").val("")
            $("#uploadImage").attr("src", "");
        });
        $("#backCreatives").click(function () {
            $("#newCreativesClose").trigger('click');
        });


        $("#crtSize").change(function () {
            $("#creativesForm").submit();
        });

        //改变创意尺寸
        $("select[name=crtSize]").change(function () {
            var crtSize = $(this).val();
            for (var i = 0; i < crtSizes.length; i++) {
                if (crtSizes[i].crtSize == crtSize) {
                    $("#crtSizeDetailAdd").val(crtSizes[i].string);
                    $("#crtSizeDetailEdit").val(crtSizes[i].string);
                    $("#sitesetTypeAdd").val(crtSizes[i].siteSetType);
                    $("#sitesetTypeEdit").val(crtSizes[i].siteSetType);
                }
            }
            //初始化图片宽高
            updatedCrtSize(crtSize);
            //重新初始广告创意图片上传
            $("#imageEditDiv").html('<input id="imageEdit"  name=""  type="file">');
            $.mitian.initSingleFileUploader('#imageEdit',
                    "*.jpeg;*.jpg;*.png", 1024 * 1024, imageEditUploadStart,
                    imageEditUploadSuccess);
        });
        //图片上传
        function imageEditUploadStart() {
            $('#imageEdit').uploadifySettings('scriptData', {
                'imgHeight': imageHeight,
                'imgWidth': imgWidth,
                'fixName': '*.jpeg;*.jpg;*.png',
                'imgType': 3,
                'status': 1
            });
        }

        function imageEditUploadSuccess(event, queueID, fileObj, response) {
            var res = JSON.parse(response);
            if (res.result == "fail") {
                alert("上传的图片尺寸不合适")
            }

            if (res.result == 'ok') {
                $("#editUploadImage").attr("src", res.picSavePath);
                $('#creativeImageUrlOriginalEdit').attr("value", res.picOrignalPath);
                $('#creativeImageUrlEdit').attr("value", res.picSavePath);
                $("#creativeImageIdEdit").attr("value", res.picId);
            }
        }

        $.mitian.initSingleFileUploader('#imageEdit',
                "*.jpeg;*.jpg;*.png", 1024 * 1024, imageEditUploadStart,
                imageEditUploadSuccess);
        //图片上传
        function imageAddUploadStart() {
            $('#imageAdd').uploadifySettings('scriptData', {
                'imgHeight': imageHeight,
                'imgWidth': imgWidth,
                'fixName': '*.jpeg;*.jpg;*.png',
                'imgType': 3,
                'status': 1
            });
        }

        function imageAddUploadSuccess(event, queueID, fileObj, response) {
            var res = JSON.parse(response);
            if (res.result == "fail") {
                alert("上传的图片尺寸不合适")
            }
            if (res.result == 'ok') {
                $("#uploadImage").attr("src", res.picSavePath);
                $('#creativeImageUrlOriginalAdd').attr("value", res.picOrignalPath);
                $('#creativeImageUrlAdd').attr("value", res.picSavePath);
                $("#creativeImageIdAdd").attr("value", res.picId);
            }
        }

        $.mitian.initSingleFileUploader('#imageAdd',
                "*.jpeg;*.jpg;*.png", 1024 * 1024, imageAddUploadStart,
                imageAddUploadSuccess);

        //更新图片尺寸
        function updatedCrtSize(crtSize) {
            for (var i = 0; i < crtSizes.length; i++) {
                if (crtSize == crtSizes[i].crtSize) {
                    imageHeight = crtSizes[i].imageHeight;
                    imgWidth = crtSizes[i].imageWidth;
                }
            }
        }

        $("#creativsAddForm").validate({
            ignore: [],
            rules: {
                crtSize: {required: true, min: 1},
                name: {required: true},
            },
            messages: {
                crtSize: {required: "请选择创意尺寸", min: "请选择创意尺寸"},
                name: {required: "请输入创意名称"},
            },
            errorPlacement: function (error, element) { //错误信息位置设置方法
                error.appendTo(element.parent().next()); //这里的element是录入数据的对象
            },

        });
        $("#creativsEditForm").validate({
            ignore: [],
            rules: {
                crtSize: {required: true, min: 1},
                name: {required: true},
            },
            messages: {
                crtSize: {required: "请选择创意尺寸", min: "请选择创意尺寸"},
                name: {required: "请输入创意名称"},
            }
        });

    });


</script>

<!-- 新建广告创意弹窗 -->
<div id="newCreatives" class="aside  top  fade" tabindex="-1" role="dialog" style="display: none;">
    <div class="aside-dialog">
        <div class="aside-content">
            <div class="aside-header" ng-show="title">
                <button id="newCreativesClose" class="close" type="button" data-dismiss="modal">×</button>
                <h4 class="aside-title">新建广告创意</h4>
            </div>
            <div class="aside-body" ng-show="content">
                <form id="creativsAddForm" action="/materials/add" method="post"
                      class="form-horizontal ng-scope ng-valid ng-dirty ng-pristine">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">广告创意名称</label>
                        <div class="col-sm-4">
                            <input id="nameAdd" type="text" class="form-control" name="name">
                            <!--修复enter按键提交表单-->
                            <input type="text" style="display: none;">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">创意尺寸</label>
                        <div class="col-sm-4">
                            <select id="crtSizeAdd" name="crtSize" class="form-control">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">上传图片</label>
                        <div class="col-sm-4">
                            <div class="form-file">
                                <input id="imageAdd" type="file">
                                <small class="text-muted" style="float:left;">图片格式:*.jpeg;*.jpg;*.png</small>
                                <image id="uploadImage">
                                    <input id="creativeImageUrlOriginalAdd" name="picPath" type="hidden"/>
                                    <input id="creativeImageUrlAdd" name="thumbPicPath" type="hidden">
                                    <input id="creativeImageIdAdd" name="imageId" type="hidden">
                                    <input id="crtSizeDetailAdd" name="crtSizeDetail" type="hidden">
                                    <input id="sitesetTypeAdd" name="sitesetType" type="hidden">
                                </image>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="aside-footer modal-footer-btn add-ads-advert-btn">
                <lable id="doNewCreatives" class="btn btn-primary">提 交</lable>
                <lable id="backCreatives" class="btn btn-default">取 消</lable>
            </div>
        </div>
    </div>
</div>


<!-- 修改广告创意 -->
<div id="editCreatives" class="aside  top  fade" tabindex="-1" role="dialog" style="display: none;">
    <div class="aside-dialog">
        <div class="aside-content">
            <div class="aside-header" ng-show="title">
                <button class="close" type="button" data-dismiss="modal">×</button>
                <h4 class="aside-title">修改广告创意</h4>
            </div>
            <div class="aside-body" ng-show="content">
                <form id="creativsEditForm" class="form-horizontal ng-scope ng-valid ng-dirty ng-pristine"
                      action="/materials/edit" method="post">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">广告创意名称</label>
                        <div class="col-sm-4">
                            <input id="nameEdit" name="name" type="text" class="form-control" required="required">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">创意尺寸</label>
                        <div class="col-sm-4">
                            <select id="crtSizeEdit" name="crtSize" class="form-control">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">上传图片</label>
                        <div class="col-sm-4">
                            <div id="imageEditDiv" class="form-file">
                                <input id="imageEdit" name="" type="file">
                            </div>
                            <small class="text-muted" style="float:left;">图片格式:*.jpeg;*.jpg;*.png</small>
                            <image id="editUploadImage">
                                <input id="creativeImageUrlOriginalEdit" name="picPath" type="hidden">
                                <input id="creativeImageUrlEdit" name="thumbPicPath" type="hidden">
                                <input id="creativeIdEdit" name="id" type="hidden">
                                <input id="creativeImageIdEdit" name="imageId" type="hidden">
                                <input id="crtSizeDetailEdit" name="crtSizeDetail" type="hidden">
                                <input id="sitesetTypeEdit" name="sitesetType" type="hidden">
                            </image>
                        </div>
                    </div>
                </form>
            </div>
            <div class="aside-footer">
                <lable id="doEditCreatives" class="btn btn-primary">提 交</lable>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/js/plugins/uploader/jquery.uploadify.js"></script>
</body>
</html>